<sqx-form-error bubble="true" closeable="true" [error]="contentForm.error | async" />
<sqx-list-view noPadding="true">
    <ng-container topHeader>
        @if (!contentVersion && isDeleted) {
            <div class="alert alert-danger">{{ "contents.deleted" | sqxTranslate }}</div>
        }

        @if (contentVersion) {
            <div class="alert alert-danger">
                <div class="float-end">
                    <a (click)="loadLatest.emit()">{{ "contents.viewLatest" | sqxTranslate }}</a>
                </div>

                @if (isDeleted) {
                    <div inline="true" [sqxMarkdown]="'contents.versionViewingDeleted' | sqxTranslate: { version: contentVersion }"></div>
                }

                @if (!isDeleted) {
                    <div inline="true" [sqxMarkdown]="'contents.versionViewing' | sqxTranslate: { version: contentVersion }"></div>
                }
            </div>
        }

        @if (isNew && showIdInput) {
            <div>
                <input
                    class="form-control"
                    [ngModel]="contentId"
                    (ngModelChange)="contentIdChange.emit($event)"
                    placeholder="{{ 'contents.idPlaceholder' | sqxTranslate }}" />
            </div>
        }
    </ng-container>
    <ng-container>
        <div class="cursors" sqxCursors>
            <sqx-cursors />
            @for (section of contentForm.sections; track section.separator?.fieldId) {
                <sqx-content-section
                    [form]="contentForm"
                    [formCompare]="contentFormCompare"
                    [formContext]="formContext"
                    [formLevel]="0"
                    [formSection]="section"
                    [language]="language"
                    (languageChange)="languageChange.emit($event)"
                    [languages]="languages"
                    [schema]="schema" />
            }
        </div>
    </ng-container>
</sqx-list-view>
